<template>
	<div class="dailyReport">
		<div class="right_header" :style='{"background":this.$store.getters.theme[5]}'>
			<div class="listName" :style='{"color":this.$store.getters.theme[6]}'>
				<i class="icon iconfont">&#xe738;</i>
				告警管理/
				<span>每日报表配置</span>
			</div>
		</div>
		<div class="right_main">
			<div class="divider2"></div>
			<el-form :model="form" label-position='top'  ref="form" class="demo-form-inline" :inline="true">
				<div class="import">
					<el-form-item label="监控语句 (服务器ID-最大值-最小值-玩家总数)：" prop="inquerySQLOne"  
					>
						<el-input type="textarea" resize='none' :rows="4" cols="40" v-model="form.inquerySQLOne"></el-input>
					</el-form-item>
					<el-form-item label="监控语句 (超出阀值玩家数)：" prop="inquerySQLTwo" >
						<el-input type="textarea" resize='none' :rows="4" cols="40" v-model="form.inquerySQLTwo"></el-input>
					</el-form-item>
				</div>
				<div class="import">
					<el-form-item label="选择工程："    prop="gameId" >
						<el-select v-model="form.gameId" filterable  placeholder="请搜索或选择游戏"@change="gameChange">
							<el-option v-for="(val,key) in gamelists" :label="val.projectName" :value="val.id" :key='key'></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="监控阈值：" prop="threshHold" >
						<el-input v-model="form.threshHold"></el-input>
					</el-form-item>
					<el-form-item label="监控描述：" prop="description" >
						<el-input v-model="form.description"></el-input>
					</el-form-item>
				</div>
				<el-form-item class="conmit">
					<el-button type="primary" @click="findForm('form')" icon="plus">立即查询</el-button>
					<el-button type="primary" @click="addForm('form')" icon="search">立即添加</el-button>
					<el-button @click="resetForm('form')">重置</el-button><br>
					<span class="warning">（输入搜索条件，留空搜索全部！）</span>
				</el-form-item>
			</el-form>
			<div class="divider2"></div>
			<div class="selDate">
				测试日期：<el-date-picker v-model="date1" type="date" placeholder="选择日期"  @change='testChange'>
				</el-date-picker>
				<el-button type="primary" @click="testDo()">测试</el-button>
			</div>
			
			<div class="table">
				<el-table :data="tableData" border style="width: 100%">
					</el-table-column> -->
						<el-table-column v-for="(val,key) in tableHeader" :prop="val.prop" :width='val.width' :label="val.label" :key=key align="center">
						</el-table-column>
					<el-table-column label="操作" align="center" width='160px'>
						<template scope="scope">
							<el-button type="primary" size="small"  @click="handleEdit(scope.$index, scope.row)">修改</el-button>
							<el-button type='danger' size="small" @click="handleDel(scope.$index, scope.row)">删除</el-button>
						</template>
					</el-table-column>
				</el-table>
			</div>
			<div class="block">
				<el-pagination
					@size-change="handleSizeChange"
					@current-change="handleCurrentChange"
					:current-page.sync="currentPage"
					:page-sizes="[10, 20, 50]" 
					:page-size="pageSize" 
					layout="total, sizes, prev, pager, next, jumper" 
					:total="total"
				>
				</el-pagination>
			</div>
			<div class="revampForm" v-show="revampShow">
				<div class="revampChoose">
					<div class="vicp-close"  @click="revampShow=false"> <i class="el-icon-close vicp-icon4"></i>
					</div>
					<el-form :model="revampForm" :rules="rules" ref="revampForm" label-width="115px" class="demo-form">
						<h5>修改每日报表配置</h5>
						<el-form-item label="选择工程："  prop="gameId">
							<el-select v-model="revampForm.gameId" filterable  placeholder="请搜索或选择游戏" @change="gameRevamp">
								<el-option v-for="(val,key) in gamelists" :label="val.projectName" :value="val.id" :key='key'></el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="监控语句 (服务器ID-最大值-最小值-玩家总数)：" prop="inquerySQLOne">
							<el-input type="textarea" resize='none' :rows="4" cols="40" v-model="revampForm.inquerySQLOne"></el-input>
						</el-form-item>
						<el-form-item label="监控语句 (超出阀值玩家数)：" prop="inquerySQLTwo">
							<el-input type="textarea" resize='none' :rows="4" cols="40" v-model="revampForm.inquerySQLTwo"></el-input>
						</el-form-item>
						<el-form-item label="监控阈值" prop="threshHold">
							<el-input v-model="revampForm.threshHold" width="120px"></el-input>
						</el-form-item>
						<el-form-item label="监控描述" prop="description">
							<el-input v-model="revampForm.description"></el-input>
						</el-form-item>
						<el-form-item>
							<el-button type="primary" @click="revampComit('revampForm')">立即修改</el-button>
							<el-button @click="resetForm('revampForm')">重置</el-button>
						</el-form-item>
					</el-form>
				</div>
			</div>
		</div>
	</div>
</template>
<script src="./dailyReport.js"></script>
<style lang="stylus" rel="stylesheet/stylus" src="./dailyReport.styl"></style>